<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算器</title>
    <style>
        .center {
            margin-top: 100px;
            margin-left: 200px;
        }

        form {
            width: 340px;
            height: 410px;
            background: aquamarine;
            border-radius: 8px;
            box-sizing: border-box;
            padding: 40px;
            box-shadow: 5px 5px;
        }

        .btn {
            cursor: pointer;
            font-size: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            margin: 5px;
            box-shadow: 5px 5px grey;
        }

        .btn:active {
            transform: translateY(2px);
            color: red;
            box-shadow: 2px 2px gray;
        }

        .other {
            background-color: blueviolet;
            color: #ffffff;
        }

        .operator {
            background-color: chocolate;
        }

        #display {
            background-color: #98d1dc;
            box-shadow: inset 6px 6px 0px #3facc0;
            /* box-shadow: inset 6px 6px 0px #3dcee838; */
            box-shadow: inset;
            text-align: right;
            border-radius: 16px;
            font-size: 20px;
            /* background: #2386a6; */
            width: 181px;
            height: 36px;
            color: #ffffff;
            padding: 3px;
            box-sizing: border-box;
            box-shadow: inset;
        }
    </style>
</head>

<body>
    <div class="center">
        <form name="calculator">
            <input type="button" id="clear" class="btn other" value="C" />
            <input type="text" id="display" />
            <br />
            <input type="button" class="btn number" value="7" onclick="get(this.value);" />
            <input type="button" class="btn number" value="8" onclick="get(this.value);" />
            <input type="button" class="btn number" value="9" onclick="get(this.value);" />
            <input type="button" class="btn operator" value="+" onclick="get(this.value);" />
            <br />
            <input type="button" class="btn number" value="4" onclick="get(this.value);" />
            <input type="button" class="btn number" value="5" onclick="get(this.value);" />
            <input type="button" class="btn number" value="6" onclick="get(this.value);" />
            <input type="button" class="btn operator" value="*" onclick="get(this.value);" />
            <br />
            <input type="button" class="btn number" value="1" onclick="get(this.value);" />
            <input type="button" class="btn number" value="2" onclick="get(this.value);" />
            <input type="button" class="btn number" value="3" onclick="get(this.value);" />
            <input type="button" class="btn operator" value="-" onclick="get(this.value);" />
            <br />
            <input type="button" class="btn number" value="0" onclick="get(this.value);" />
            <input type="button" class="btn operator" value="." onclick="get(this.value);" />
            <input type="button" class="btn operator" value="/" onclick="get(this.value);" />
            <input type="button" class="btn other" value="=" onclick="calculates();" />
        </form>
        <script>
            let str = "";
            let display = document.getElementById("display");
            let clear = document.getElementById("clear");
            function get(value) {
                str += value;
                display.value = str;
            }
            function calculates() {
                str = display.value = eval(str);
            }
            clear.onclick = function () {
                str = "";
                display.value = "";
            };
        </script>
    </div>
</body>

</html>